<template>
	<view class="my-content">
		<view style="background-color: #F6F6F6;">
			<view class="card" v-for="(item, index) in list" :key="index" :class="{op:item.is_read==1}">
				<text class="timer">{{ time('S', item.createtime) }}</text>
				<view class="card_body">
					<view class="card_body_top">
						<image class="icon" :src='serverImageUrl("/static/images/message/gongsigonggao.png")'
							style="width: 12%;height: 46px;">
						</image>
						<text class="title" style="width: 88%;">
							<template v-if="lang=='zh'">
								{{item.title}}
							</template>
							<template v-if="lang=='ru'">
								{{item.title_ru}}
							</template>
						</text>
					</view>
					<view class="card_body_bottom">
						<view style="word-break: break-all;margin-top: 20rpx;" v-if="item.table_type=='10'">
							<text v-if="lang=='zh'">
							    {{replaceChange(item.con)}}
							</text>
							<text v-if="lang=='ru'" style="white-space: pre-wrap;">
								{{replaceChange(item.con_ru)}}
							</text>
						</view>
						<view style="word-break: break-all;margin-top: 20rpx;" v-if="item.table_type!='10'">
							<template v-if="lang=='zh'">
								{{item.con}}
							</template>
							<template v-if="lang=='ru'">
								{{item.con_ru}}
							</template>
						</view>
						<text style="text-align: center;padding-top: 50rpx;"
							@click="more(item);item.is_read=1">{{$t('查看更多')}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		time
	} from "@/common/public";
	export default {
		data() {
			return {
				lang: uni.getStorageSync("lang"),
				system: 'system',
				page: 1,
				list: []
			};
		},
		onLoad() {
			this.$u.api.basic.getNoticeList({
				type: this.system,
				page: this.page
			}).then(res => {
				this.list = res
			})
		},
		onShow() {
			this.$u.api.basic.getNoticeList({
				type: this.system,
				page: this.page
			}).then(res => {
				this.list = res
			})
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("系统通知")
			})
		},
		methods: {
			time,
			replaceChange(str){
				return str.replace(/<br\/>/g, '\n\n\n')
			},
			more(i) {
				console.log(i.id);
				this.$u.route({
					url: "/pages/message/systemNotificationDetail/systemNotificationDetail",
					params: {
						id: i.id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-content {
		// height: 100vh;

		display: flex;
		flex-direction: column;
	}

	.card {
		margin: 48.84rpx 0 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 17.44rpx;

		// overflow: hidden;
		.timer {
			font-size: 24rpx;
			font-weight: 600;
			color: #606060;
			line-height: 24rpx;
			margin-top: 22.67rpx;
			margin-bottom: 22.67rpx;
		}
	}

	.card_body {
		background-color: #FFFFFF;
		width: 100%;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(236, 236, 236, 0.5);
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.card_body_top {
			border-bottom: 2rpx solid #DCDCDC;
			display: flex;
			align-items: center;
			padding: 26.16rpx 0;

			image {
				margin-right: 13.95rpx;
			}

			text {
				font-size: 30rpx;

				font-weight: 600;
				color: #1C1C1C;
				line-height: 35rpx;
			}
		}


	}

	.card_body_bottom {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		view {
			font-size: 28rpx;

			font-weight: 400;
			color: #808080;
			line-height: 30rpx;
			display: flex;
			justify-content: flex-start;
		}

		text {
			font-size: 28rpx;

			font-weight: 400;
			color: #717171;
			line-height: 24rpx;
		}
	}

	.op {
		.title {
			color: #999 !important;
			font-weight: initial !important;
		}

		.icon {
			display: none;
		}
	}
</style>